<template>
  <div class="admin-dashboard">
    <!-- 数据统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card blue" @click="goTo('/admin/users')">
          <div class="stat-icon"><el-icon><User></User></el-icon></div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.totalUsers }}</div>
            <div class="stat-label">总用户数</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card green" @click="goTo('/admin/animals')">
          <div class="stat-icon"><el-icon><List></List></el-icon></div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.petsForSale }}</div>
            <div class="stat-label">在售宠物</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card orange" @click="goTo('/admin/order-approval')">
          <div class="stat-icon"><el-icon><Clock></Clock></el-icon></div>
          <div class="stat-info">
            <div class="stat-value">{{ stats.pendingOrders }}</div>
            <div class="stat-label">待审批订单</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card red">
          <div class="stat-icon"><el-icon><Money></Money></el-icon></div>
          <div class="stat-info">
            <div class="stat-value">¥ {{ stats.monthlySales.toLocaleString() }}</div>
            <div class="stat-label">本月成交额</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快捷操作入口 -->
    <el-row :gutter="20" class="shortcuts-row">
      <el-col :span="8">
        <el-card shadow="hover" class="shortcut-card" @click="goTo('/admin/order-approval')">
          <el-icon class="shortcut-icon"><DocumentChecked></DocumentChecked></el-icon>
          <div class="shortcut-text">订单审批</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" class="shortcut-card" @click="goTo('/admin/animals')">
          <el-icon class="shortcut-icon"><List></List></el-icon>
          <div class="shortcut-text">动物管理</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" class="shortcut-card" @click="goTo('/admin/users')">
          <el-icon class="shortcut-icon"><User></User></el-icon>
          <div class="shortcut-text">用户管理</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { User, List, Clock, Money, DocumentChecked } from '@element-plus/icons-vue';
// 1. 导入新的API函数
import { getDashboardStatsApi } from '@/api/dashboard.js';

const router = useRouter();

const stats = reactive({
  totalUsers: 0,
  petsForSale: 0,
  pendingOrders: 0,
  monthlySales: 0,
});

// 2. 修改为调用真实API
const fetchDashboardStats = async () => {
  try {
    const res = await getDashboardStatsApi();
    if (res) {
      // 使用 Object.assign 将获取的数据赋值给响应式对象
      Object.assign(stats, res);
    }
  } catch (error) {
    console.error("获取仪表盘数据失败:", error);
  }
};

const goTo = (path) => router.push(path);

onMounted(fetchDashboardStats);
</script>

<style scoped>
.admin-dashboard { padding: 20px; }
.stats-row, .shortcuts-row { margin-bottom: 20px; }
.stat-card {
  color: #fff; border-radius: 8px; display: flex;
  align-items: center; padding: 20px;
  cursor: pointer; transition: all 0.2s ease;
}
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.stat-card.blue { background: linear-gradient(45deg, #409eff, #66b1ff); }
.stat-card.green { background: linear-gradient(45deg, #67c23a, #85ce61); }
.stat-card.orange { background: linear-gradient(45deg, #e6a23c, #ebb563); }
.stat-card.red { background: linear-gradient(45deg, #f56c6c, #f78989); }
.stat-icon { font-size: 50px; margin-right: 20px; opacity: 0.8; }
.stat-info .stat-value { font-size: 28px; font-weight: bold; }
.stat-info .stat-label { font-size: 14px; }
.shortcut-card {
  cursor: pointer; text-align: center; padding: 30px 0;
  transition: all 0.3s ease;
}
.shortcut-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  color: #409eff;
}
.shortcut-icon { font-size: 40px; margin-bottom: 10px; }
.shortcut-text { font-size: 16px; font-weight: 500; }
</style>
